<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2348144_doi7jloq8yo.css">
    <link rel="icon" href="/images/logo.ico" type="image/x-icon">
    <title>购物车 - 搜狗商城</title>
</head>

<body>
    <!-- header start-->
    <header></header>
    <!-- header end -->

    <!-- content start -->
    <div class="content">
        <div class="main">
            <div class="con hide">
                <div class="none">
                    <img src="../images/cart-none.png" alt="">
                    <div>
                        <p>您的购物车还是空的</p>
                        <a href="">马上去购物</a>
                    </div>
                </div>
            </div>
            <div class="shop-list">
                <!-- <div class="cart-list">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" checked><span>全选</span>
                                </th>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="checkbox" checked>
                                </td>
                                <td>
                                    <img src="../images/cart-list.png" alt="">
                                    <a href="">搜狗出品 糖猫词典笔 随扫随译扫出好成绩</a>
                                </td>
                                <td>799.00元</td>
                                <td>
                                    <p>
                                        <span class="sp1">-</span>
                                        <span class="num">1</span>
                                        <span class="sp2">+</span>
                                    </p>
                                </td>
                                <td>799.00元</td>
                                <td>删除</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="total">
                    <div class="left2">
                        <div>
                            <input type="checkbox" checked>
                            <span>全选</span>
                        </div>
                        <span class="line">|</span>
                        <p>共<span> 1 </span>件商品，已选择<span class="red"> 1 </span>件</p>
                    </div>
                    <div class="right2">
                        <span>合计: ￥<span class="price">799.00</span></span>
                        <a href="">去结算</a>
                    </div>
                </div> -->
            </div>
            <div class="head">
                <h2>热门推荐</h2>
                <span>给您精心挑选的热门产品，让您的生活更加便捷</span>
            </div>
            <div class="prod">
            </div>
        </div>
    </div>
    <script type="text/html" id="shopList">
        <div class="cart-list">
            <table>
                <thead>
                    <tr>
                        <th>
                            <div class="checkbox checkAll {{checkAll ? 'checked' : ''}}"></div>
                            <span>全选</span>
                        </th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {{each prodList item}}
                    <tr>
                        <td class="checkBox">
                            <div class="checkbox {{item.isChecked ? 'checked' : ''}}"></div>
                        </td>
                        <td>
                            <img src="{{item.image[0]}}" alt="">
                            <a href="">{{item.name}}</a>
                        </td>
                        <td>{{item.price/100}}元</td>
                        <td>
                            <p id="{{item.id}}">
                                <span class="sp1">-</span>
                                <span class="num">{{item.count}}</span>
                                <span class="sp2">+</span>
                            </p>
                        </td>
                        <td>{{((item.price/100)*item.count).toFixed(2)}}元</td>
                        <td class="del">删除</td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
        <div class="total">
            <div class="left2">
                <div>
                    <div class="checkbox checkAll {{checkAll ? 'checked' : ''}}"></div>
                    <span>全选</span>
                </div>
                <span class="line">|</span>
                <p>共<span class="allCount"> 1 </span>件商品，已选择<span class="red hasChecked"> 1 </span>件</p>
            </div>
            <div class="right2">
                <span>合计: ￥<span class="price">799.00</span></span>
                <a href="">去结算</a>
            </div>
        </div>
    </script>
    <script type="text/html" id="cartGoods">
        {{each list item}}
        <a href="/html/details.html?{{item.productId}}" class="box">
            <img src="{{item.image}}" alt="">
            <p class="fs16">{{item.name}}</p>
            <p class="fs14">{{item.desc}}</p>
            <p class="price fs14">￥<span>{{item.salePrice/100}}</span></p>
        </a>
        {{/each}}
    </script>
    <!-- content end -->

    <!-- footer start -->
    <footer></footer>
    <!-- footer end -->

    <!-- sider start -->
    <div class="cbl"></div>
    <!-- sider end -->

    <script src="/lib/requirejs/require.min.js" data-main="/js/cart"></script>
</body>

</html>